<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
        <title></title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet/less" type="text/css" href="styles.less">
        <script src="http://cdn.bootcss.com/less.js/1.7.4/less.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

        <style>
            body
            {
                

                margin-top:5px;
                background-color: #394F63;
            }
            #topFrame
            {
                width: 1000px;
                height: 60px;

                background-color: #394F63;

                padding-left: 80px;
            }
            #topFrame>
            img,
            #topFrame>
            div
            {
                float: left;

                color: #FFFFFF;

                
                margin-left: 40px;
                margin-right: 40px;
            }
            #topFrame>
            div
            h4
            {
                padding-top:15px;
            }
            .row
            {
                width: 1300px;
                
                margin: auto;
            }
            #bodyFrame
            {
                width: 1300px;
                height:670px;

                background-color: #F1F1F2;

                padding-top: 20px;
                padding-bottom: 80px;
            }
            #mainFrame
            {
                width: 1300px;

            }
            
            #leftFrame
            {
                width: 150px;
                height: 550px;
                float: left;

                border-right:2px solid #DDDDDD;
                padding-top: 10px;
                padding-left: 10px;
                padding-right: 10px;

            }


            #rightFrame
            {
                width: 800px;
                float: left;

                background-color: #F1F1F2;

                padding-left: 40px;
            }
            td>
            img
            {
                width:40px;
                height:40px;
            }
            .tableSearchBar
            {
                float:right;

                padding-right:5px;
                margin-bottom: 10px;
            }
            .panel-body>
            pre
            {
                overflow-y: scroll; 
                overflow-x:hidden;
                max-height: 180px;
                width:720px;

                background-color:#FFFFFF;
            }
            #footFrame
            {
                width: 1300px;

                background-color: #F1F1F2;
                padding-bottom: 15px;
            }
            #footFrame>
            div
            {
                width: 100%;

                margin-left: auto;
                margin-right: auto;
            }
            
            a:link 
            {
             color: #FFFFFF;
             text-decoration: none;
            }
            a:visited 
            {
             color: #FFFFFF;
             text-decoration: none;
            }
            a:hover 
            {
             color: #FFFFFF;
             text-decoration: underline;
            }
            a:active 
            {
             color: #FFFFFF;  
             text-decoration: underline;
            }
            .panel-heading
            {
                padding:0 0 0 0;
            }
            .alert
            {
                margin-bottom:0px;
            }
        </style>

        
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div id="topFrame">
                    <img src="../static/img/logo.png"/>
                    <div><a href="#"><h4>首页</h4></a></div>
                    <div><a href="#"><h4>找朋友</h4></a></div>
                    <div><a href="#"><h4>个人主页</h4></a></div>
                    <div><a href="#"><h4>后台管理</h4></a></div>
                </div>
                <div class="col-md-12" id="bodyFrame">
                    <div class="row">
                        <div id="mainFrame">
                            <div id="leftFrame">
                                <div class="btn-group-vertical btn-group-lg">

                                    <button type="button" class="btn btn-default">子管理员名单</button>
                                    <button type="button" class="btn btn-default">用戶言论</button>
                                    <button type="button" class="btn btn-default">黑名单</button>
                                </div>
                            </div>
                            <div id="rightFrame" >
                                <h3>黑名单</h3>
                                <div class="panel-group" id="accordion">
                                  <div class="panel panel-default">
                                    <div class="panel-heading" >
                                      <h4 class="panel-title">
                                        <div class="alert alert-danger" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" >
                                          封号<span class="badge" style="float:right;">12</span>
                                        </div>
                                      </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse">
                                      <div class="panel-body">
                                        <div class="col-xs-5 tableSearchBar">
                                            <input type="text" class="form-control  input-sm" placeholder="名称、邮箱" >
                                        </div>
                                        <pre>
                                            <table class="table table-hover">
                                                <thead>
                                                    <th>#</th>
                                                    <th>名称</th>
                                                    <th>邮箱</th>
                                                    <th>原因</th>
                                                    <th>时间</th>
                                                    <th>限期</th>
                                                    <th>创建人</th>
                                                    <th></th>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <img src="../static/img/headshot1.png" />
                                                        </td>
                                                        <td>
                                                            小熊
                                                        </td>
                                                        <td>
                                                            11XXXXXXX
                                                        </td>
                                                        <td style="width:100px;">
                                                            XXXXXXXXXXXXXXXXXXX
                                                        </td>
                                                        <td>
                                                            2014/2/31
                                                        </td>
                                                        
                                                        <td>
                                                            永久
                                                        </td>
                                                        <td>
                                                            ADMIN
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger">撤消</button>
                                                        </td>
                                                    </tr>


                                                    <tr>
                                                        <td>
                                                            <img src="../static/img/headshot1.png"/>
                                                        </td>
                                                        <td>
                                                            小熊
                                                        </td>
                                                        <td>
                                                            11XXXXXXX
                                                        </td>
                                                        <td style="width:100px;">
                                                            XXXXXXXXXXXXXXXXXXX
                                                        </td>
                                                        <td>
                                                            2014/2/31
                                                        </td>
                                                        
                                                        <td>
                                                            永久
                                                        </td>
                                                        <td>
                                                            ADMIN
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger">撤消</button>
                                                        </td>
                                                    </tr>


                                                    <tr>
                                                        <td>
                                                            <img src="../static/img/headshot1.png"/>
                                                        </td>
                                                        <td>
                                                            小熊
                                                        </td>
                                                        <td>
                                                            11XXXXXXX
                                                        </td>
                                                        <td style="width:100px;">
                                                            XXXXXXXXXXXXXXXXXXX
                                                        </td>
                                                        <td>
                                                            2014/2/31
                                                        </td>
                                                        
                                                        <td>
                                                            永久
                                                        </td>
                                                        <td>
                                                            ADMIN
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger">撤消</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </pre>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-default">
                                    <div class="panel-heading">
                                      <h4 class="panel-title">
                                        <div class="alert alert-warning" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                          禁言
                                          <span class="badge" style="float:right;">36</span>
                                          
                                        </div>
                                      </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse">
                                      <div class="panel-body">
                                        <div class="col-xs-5 tableSearchBar">
                                            <input type="text" class="form-control  input-sm" placeholder="名称、邮箱" >
                                        </div>
                                        <pre>
                                            <table class="table table-hover">
                                                <thead>
                                                    <th>#</th>
                                                    <th>名称</th>
                                                    <th>邮箱</th>
                                                    <th>原因</th>
                                                    <th>时间</th>
                                                    <th>限期</th>
                                                    <th>创建人</th>
                                                    <th></th>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <img src="../static/img/headshot1.png"/>
                                                        </td>
                                                        <td>
                                                            小熊
                                                        </td>
                                                        <td>
                                                            11XXXXXXX
                                                        </td>
                                                        <td style="width:100px;">
                                                            XXXXXXXXXXXXXXXXXXX
                                                        </td>
                                                        <td>
                                                            2014/2/31
                                                        </td>
                                                        
                                                        <td>
                                                            永久
                                                        </td>
                                                        <td>
                                                            ADMIN
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger">撤消</button>
                                                        </td>
                                                    </tr>


                                                    <tr>
                                                        <td>
                                                            <img src="../static/img/headshot1.png"/>
                                                        </td>
                                                        <td>
                                                            小熊
                                                        </td>
                                                        <td>
                                                            11XXXXXXX
                                                        </td>
                                                        <td style="width:100px;">
                                                            XXXXXXXXXXXXXXXXXXX
                                                        </td>
                                                        <td>
                                                            2014/2/31
                                                        </td>
                                                        
                                                        <td>
                                                            永久
                                                        </td>
                                                        <td>
                                                            ADMIN
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger">撤消</button>
                                                        </td>
                                                    </tr>


                                                    <tr>
                                                        <td>
                                                            <img src="../static/img/headshot1.png"/>
                                                        </td>
                                                        <td>
                                                            小熊
                                                        </td>
                                                        <td>
                                                            11XXXXXXX
                                                        </td>
                                                        <td style="width:100px;">
                                                            XXXXXXXXXXXXXXXXXXX
                                                        </td>
                                                        <td>
                                                            2014/2/31
                                                        </td>
                                                        
                                                        <td>
                                                            永久
                                                        </td>
                                                        <td>
                                                            ADMIN
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger">撤消</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                        </pre>
                                        <button type="button" class="btn btn-danger">全部撤消</button>
                                      </div>
                                    </div>
                                    
                                  </div>
                                  <div class="panel panel-default">
                                    <div class="panel-heading">
                                      <h4 class="panel-title">
                                        <div class="alert alert-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                          加入黑名单
                                          
                                        </div>
                                      </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse">
                                      <div class="panel-body">
                                        <div class="col-xs-5 tableSearchBar">
                                            <input type="text" class="form-control  input-sm" placeholder="名称、邮箱、帖子ID、评论ID" >
                                        </div>
                                        <pre>
                                            <table class="table table-hover">
                                                <thead>
                                                    <th>#</th>
                                                    <th>名称</th>
                                                    <th>邮箱</th>
                                                    <th></th>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <img src="../static/img/headshot1.png"/>
                                                        </td>
                                                        <td>
                                                            小熊
                                                        </td>
                                                        <td>
                                                            11XXXXXXX
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">加入黑名单</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </pre>
                                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                          <div class="modal-dialog">
                                            <div class="modal-content">
                                              <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="modal-title" id="myModalLabel">加入黑名单</h4>
                                              </div>
                                              <div class="modal-body" >
                                                    <h4>将     小熊(11XXXXXXXX)     加入黑名单</h4>
                                                    <form class="form-horizontal" role="form">
                                                      <div class="form-group">
                                                        <label class="col-sm-2 control-label" for="formGroupInputLarge">原因</label>
                                                        <div class="col-sm-10">
                                                          <input class="form-control" type="text"  placeholder="">
                                                        </div>
                                                      </div>
                                                      <div class="form-group">
                                                        <label class="col-sm-2 control-label" for="formGroupInputLarge">类型</label>
                                                        <div class="col-sm-10">
                                                          <select class="form-control">
                                                              <option>封号</option>
                                                              <option>禁言</option>
                                                          </select>
                                                        </div>
                                                      </div>
                                                      <div class="form-group">
                                                        <label class="col-sm-2 control-label" for="formGroupInputLarge">期限</label>
                                                        <div class="col-sm-10">
                                                          <select class="form-control">
                                                              <option>永久</option>
                                                              <option>一年</option>
                                                              <option>半年</option>
                                                              <option>一個月</option>
                                                              <option>一週</option>
                                                          </select>
                                                        </div>
                                                      </div>
                                                    </form>
                                              </div>
                                              <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-danger">确定加入</button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>

                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>















                            </div>
                        </div>        
                    </div>  
                </div>


                <div id="footFrame" >
                       <div style="text-align: center;"> &copy; 2014汕大交友网  </div>
                </div> 


            </div>
            
        </div>
    </body>
</html>